<!DOCTYPE html>
<html>

	<head>
		<title>Measure example</title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.js"></script>
		<script src="js/ol-debug.js"></script>

		<style>
			.tooltip {
				position: relative;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 4px;
				color: white;
				padding: 4px 8px;
				opacity: 0.7;
				white-space: nowrap;
			}
			.tooltip-measure {
				opacity: 1;
				font-weight: bold;
			}
			.tooltip-static {
				background-color: #ffcc33;
				color: black;
				border: 1px solid white;
			}
			.tooltip-measure:before,
			.tooltip-static:before {
				border-top: 6px solid rgba(0, 0, 0, 0.5);
				border-right: 6px solid transparent;
				border-left: 6px solid transparent;
				content: "";
				position: absolute;
				bottom: -6px;
				margin-left: -7px;
				left: 50%;
			}
			.tooltip-static:before {
				border-top-color: #ffcc33;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid">
			<!--弹出层-->
			<div id="" style="display: none;">
				<div id="test" class="tag" style="width:110px;height: 20px;position: relative; background-color:#D6E9C6 ;">
				</div>
			</div>

			<div id="form" class="row-fluid span12">
				<form class="form-inline">
					<label>Geometry type &nbsp;</label>
					<select id="type">
						<option value="Point">标注</option>
						<option value="LineString">测距</option>
						<option value="Polygon">侧面积</option>
					</select>
					<label class="checkbox">
						<input type="checkbox" checked="checked" id="geodesic" />use geodesic measures</label>
				</form>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
					<input type="button" name="export" id="export" value="export" />
				</div>
			</div>

		</div>
		<script>
		$("#export").click(function(){
				map.once('postcompose', function(event) {
					var canvas = event.context.canvas;
					var image = canvas.toDataURL('image/png');
					console.log(image);
				});
				map.renderSync();
			});
			var wgs84Sphere = new ol.Sphere(6378137);
			var mapLayera = new ol.layer.Tile({
				source: new ol.source.XYZ({
					crossOrigin:"Anonymous",
					projection: "EPSG:4326",
					url: "http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}"
				})
			});
			 //地图图层
			var mapLayer = new ol.layer.Tile({
				source: new ol.source.XYZ({
					crossOrigin:"Anonymous",
					projection: "EPSG:4326",
					url: "http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}"
				})
			});
			mapLayer.setExtent([117.217, 39.13,119.217, 40.13]);
			mapLayera.setOpacity(0.3);
			 //文字图层
			var wordLayer = new ol.layer.Tile({
				source: new ol.source.XYZ({
					crossOrigin:"Anonymous",
					projection: "EPSG:4326",
					url: "http://t7.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}"
				})
			});
			var source = new ol.source.Vector();
			var vector = new ol.layer.Vector({
				source: source,
				//回调函数，当draoend结束时调用
				style: [new ol.style.Style({
						fill: new ol.style.Fill({
							color: 'rgba(255, 255, 255, 0.2)'
						}),
						stroke: new ol.style.Stroke({
							color: '#666',
							width: 8,
							//lineGap: 'butt',
							lineJoin: 'miter',
							//lineDash:[15],
							miterLimit: 20
						}),
						image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ {
							opacity: 0.95,
							src: 'img/u234.png'
						}),
						zIndex:1
					}),
					new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: 'red',
							width: 2
						}),
						zIndex:2
					})
					/*,
										new ol.style.Style({
											image: new ol.style.Circle({
												radius: 5,
												stroke: new ol.style.Stroke({
													color: 'red',
													width: 2
												})
											}),
											geometry: function(feature) {
												// return the coordinates of the first ring of the polygon
												if(feature.getGeometry() instanceof ol.geom.LineString){
													var coordinates = feature.getGeometry().getCoordinates();
													return new ol.geom.MultiPoint(coordinates);
												}
											}
										})*/
				]
			});
			var index = 1;
			/**
			 * Currently drawn feature.
			 * @type {ol.Feature}
			 */
			var sketch;
			/**
			 * The help tooltip element.
			 * @type {Element}
			 */
			var helpTooltipElement;
			/**
			 * Overlay to show the help messages.
			 * @type {ol.Overlay}
			 */
			var helpTooltip;
			/**
			 * The measure tooltip element.
			 * @type {Element}
			 */
			var measureTooltipElement;
			/**
			 * Overlay to show the measurement.
			 * @type {ol.Overlay}
			 */
			var measureTooltip;
			var tempTooltipElement;
			var tempTooltip;
			var tagTooltipElement;
			var tagTooltip;
			/**
			 * Message to show when the user is drawing a polygon.
			 * @type {string}
			 */
			var continuePolygonMsg = '单击确定起点，双击结束';
			/**
			 * Message to show when the user is drawing a line.
			 * @type {string}
			 */
			var continueLineMsg = '单击确定起点，双击结束';
			/**
			 * Handle pointer move.
			 * @param {ol.MapBrowserEvent} evt
			 */
			var pointerMoveHandler = function(evt) {
				if (evt.dragging) {
					return;
				}
				/** @type {string} */
				var helpMsg = '单击确定起点，双击结束';
				/*if (sketch) {
					var geom = (sketch.getGeometry());
					if (geom instanceof ol.geom.Polygon) {
						helpMsg = continuePolygonMsg;
					} else if (geom instanceof ol.geom.LineString) {
						helpMsg = continueLineMsg;
					}
				}*/
				helpTooltipElement.innerHTML = helpMsg;
				helpTooltip.setPosition(evt.coordinate);
				$(helpTooltipElement).removeClass('hidden');
			};
			var map = new ol.Map({
				layers: [mapLayera,mapLayer/*, wordLayer, vector*/],
				target: 'map',
				view: new ol.View({
					center: [117.217, 39.13], //必需
					projection: "EPSG:4326", //必需
					zoom: 15
				})
			});
			 //帮助信息
			map.on('pointermove', pointerMoveHandler);
			map.on("singleclick", function(evt) {
				if (sketch) {
					var geom = (sketch.getGeometry());
					var tooltipCoord = evt.coordinate;
					var output;
					if (geom instanceof ol.geom.LineString) {
						output = formatLength( /** @type {ol.geom.LineString} */ (geom));
						if (tooltipCoord[0] == geom.getFirstCoordinate()[0] && tooltipCoord[1] == geom.getFirstCoordinate()[1]) {
							return;
						}
						tempTooltipElement.innerHTML = output;
						tempTooltip.setPosition(tooltipCoord);
						tooltip.push(tempTooltip);
						tempTooltipElement = null;
						createTempTooltip();
					}
				}
				if (typeSelect.value == "Point") {
					var temp = index++;
					tips[temp] = tagTooltip;
					tagTooltipElement.innerHTML = "标注信息<span class='glyphicon glyphicon-remove' aria-hidden='true' style='cursor: pointer;' onclick='removeTip(" + temp + ");'></span>";
					tagTooltip.setPosition(evt.coordinate);
					tagTooltipElement = null;
					createTagTooltip();
				}
			});
			$(map.getViewport()).on('mouseout', function() {
				$(helpTooltipElement).addClass('hidden');
			});
			var typeSelect = document.getElementById('type');
			var geodesicCheckbox = document.getElementById('geodesic');
			var draw; // global so we can remove it later
			var tooltip;
			var tips = new Array();

			function addInteraction() {
					var type = typeSelect.value;
					if (typeSelect.value == "Point") {
						draw = new ol.interaction.Draw({
							source: source,
							type: /** @type {ol.geom.GeometryType} */ (type),
							style: new ol.style.Style({
								image: new ol.style.Icon( /** @type {olx.style.IconOptions} */ {
									opacity: 0.95,
									src: 'img/u234.png'
								})
							})
						});
					} else {
						draw = new ol.interaction.Draw({
							source: source,
							type: /** @type {ol.geom.GeometryType} */ (type),
							//绘图时的样式
							style: new ol.style.Style({
								fill: new ol.style.Fill({
									color: 'rgba(255, 255, 255, 0.2)'
								}),
								stroke: new ol.style.Stroke({
									color: 'rgba(0, 0, 0, 0.5)',
									lineDash: [10, 10],
									width: 2
								}),
								image: new ol.style.Circle({
									radius: 5,
									stroke: new ol.style.Stroke({
										color: 'red'
									}),
									fill: new ol.style.Fill({
										color: 'rgba(255, 255, 255, 0.2)'
									})
								})
							})
						})
					}
					var listener;
					draw.on('drawstart',
						function(evt) {
							// set sketch
							sketch = evt.feature;
							tooltip = new Array();
							/** @type {ol.Coordinate|undefined} */
							var tooltipCoord = evt.coordinate;
							listener = sketch.getGeometry().on('change', function(evt) {
								var geom = evt.target;
								var output;
								if (geom instanceof ol.geom.Polygon) {
									output = formatArea( /** @type {ol.geom.Polygon} */ (geom));
									tooltipCoord = geom.getInteriorPoint().getCoordinates();
								} else if (geom instanceof ol.geom.LineString) {
									output = formatLength( /** @type {ol.geom.LineString} */ (geom));
									tooltipCoord = geom.getLastCoordinate();
								}
								measureTooltipElement.innerHTML = output;
								measureTooltip.setPosition(tooltipCoord);
							});
						}, this);
					draw.on('drawend',
						function(evt) {
							measureTooltipElement.className = 'tooltip tooltip-static';
							measureTooltip.setOffset([0, -7]);
							tooltip.push(measureTooltip);
							tips[index++] = tooltip;
							var feature = evt.feature;
							var circle;
							feature.setId(index++);
							var geom = feature.getGeometry();
							if (geom instanceof ol.geom.LineString) {
								var coordinates = geom.getCoordinates();
								var line = new ol.Feature(new ol.geom.LineString(coordinates));
								line.setStyle(new ol.style.Style({
									stroke: new ol.style.Stroke({
										color: 'white',
										width: 2,
										lineDash:[10,3]
									})
								}));
								circle = new ol.Feature(new ol.geom.MultiPoint(coordinates));
								circle.setStyle(new ol.style.Style({
									image: new ol.style.Circle({
										radius: 5,
										stroke: new ol.style.Stroke({
											color: 'red',
											width: 2
										})
									})
								}));
								circle.setId(index++);
								source.addFeature(circle);
//								source.addFeature(line);
								measureTooltipElement.innerHTML += "<span class='glyphicon glyphicon-remove' aria-hidden='true' style='cursor: pointer;' onclick='removeFeature(" + feature.getId() + "," + circle.getId() + ");'></span>";
							}
							// unset sketch
							sketch = null;
							// unset tooltip so that a new one can be created
							measureTooltipElement = null;
							createMeasureTooltip();
							ol.Observable.unByKey(listener);
						}, this);
					map.addInteraction(draw);
				}
				/**
				 * Creates a new help tooltip
				 */

			function createHelpTooltip() {
					if (helpTooltipElement) {
						helpTooltipElement.parentNode.removeChild(helpTooltipElement);
					}
					helpTooltipElement = document.createElement('div');
					helpTooltipElement.className = 'tooltip hidden';
					helpTooltip = new ol.Overlay({
						element: helpTooltipElement,
						offset: [15, 0],
						positioning: 'center-left'
					});
					map.addOverlay(helpTooltip);
				}
				/**
				 * Creates a new measure tooltip
				 */

			function createMeasureTooltip() {
					if (measureTooltipElement) {
						measureTooltipElement.parentNode.removeChild(measureTooltipElement);
					}
					measureTooltipElement = document.createElement('div');
					measureTooltipElement.className = 'tooltip tooltip-measure';
					measureTooltip = new ol.Overlay({
						element: measureTooltipElement,
						offset: [0, -15],
						positioning: 'bottom-center'
					});
					map.addOverlay(measureTooltip);
				}
				/**
				 * 创建临时图层
				 */

			function createTempTooltip() {
					tempTooltipElement = document.createElement('div');
					tempTooltipElement.className = 'tooltip tooltip-measure';
					tempTooltip = new ol.Overlay({
						element: tempTooltipElement,
						offset: [0, -15],
						positioning: 'bottom-center'
					});
					map.addOverlay(tempTooltip);
				}
				/**
				 * 创建标注层
				 */

			function createTagTooltip() {
					/*tagTooltipElement = document.createElement('div');
					tagTooltipElement.className = 'tooltip tooltip-measure';*/
					tagTooltipElement = document.getElementById('test').cloneNode(true);
					tagTooltip = new ol.Overlay({
						element: tagTooltipElement,
						offset: [0, -15],
						positioning: 'bottom-center'
					});
					map.addOverlay(tagTooltip);
				}
				/*	function createTagTooltip() {
							tagTooltipElement = document.createElement('div');
							$(tagTooltipElement).popover('destroy');
							// the keys are quoted to prevent renaming in ADVANCED mode.
							$(tagTooltipElement).popover({
								'placement': 'top',
								'animation': false,
								'html': true,
								'content': '<p>The location you clicked was:</p>'
							});
							$(tagTooltipElement).popover('show');
							tagTooltip = new ol.Overlay({
								element: tagTooltipElement,
								offset: [0, -15],
								positioning: 'bottom-center'
							});
							map.addOverlay(tagTooltip);
						}*/
				/**
				 * format length output
				 * @param {ol.geom.LineString} line
				 * @return {string}
				 */
			var formatLength = function(line) {
				var length;
				if (geodesicCheckbox.checked) {
					var coordinates = line.getCoordinates();
					length = 0;
					var sourceProj = map.getView().getProjection();
					for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
						var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
						var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
						length += wgs84Sphere.haversineDistance(c1, c2);
					}
				} else {
					length = Math.round(line.getLength() * 100) / 100;
				}
				var output;
				if (length > 100) {
					output = (Math.round(length / 1000 * 100) / 100) +
						' ' + 'km';
				} else {
					output = (Math.round(length * 100) / 100) +
						' ' + 'm';
				}
				return output;
			};
			/**
			 * format length output
			 * @param {ol.geom.Polygon} polygon
			 * @return {string}
			 */
			var formatArea = function(polygon) {
				var area;
				if (geodesicCheckbox.checked) {
					var sourceProj = map.getView().getProjection();
					var geom = /** @type {ol.geom.Polygon} */ (polygon.clone().transform(
						sourceProj, 'EPSG:4326'));
					var coordinates = geom.getLinearRing(0).getCoordinates();
					area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
				} else {
					area = polygon.getArea();
				}
				var output;
				if (area > 10000) {
					output = (Math.round(area / 1000000 * 100) / 100) +
						' ' + 'km<sup>2</sup>';
				} else {
					output = (Math.round(area * 100) / 100) +
						' ' + 'm<sup>2</sup>';
				}
				return output;
			};
			var removeFeature = function(feature, circle) {
				source.removeFeature(source.getFeatureById(feature));
				source.removeFeature(source.getFeatureById(circle));
				var tip = tips[feature - 1];
				for (overlay in tip) {
					map.removeOverlay(tip[overlay]);
				}
			};
			var removeTip = function(temp) {
					source.removeFeature(source.getFeatureById(temp - 1));
					map.removeOverlay(tips[temp]);
				}
				/**
				 * 初始化操作
				 */
			createMeasureTooltip();
			createHelpTooltip();
			createTempTooltip();
			createTagTooltip();
			 //选择操作内容
			addInteraction();
			/**
			 * Let user change the geometry type.
			 * @param {Event} e Change event.
			 */
			typeSelect.onchange = function(e) {
				map.removeInteraction(draw);
				addInteraction();
			};
		</script>
	</body>

</html>